<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部 -->
        <div class="btn_wrapper">
          <span style="font-size: 12px; color: pink"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button type="success" size="mini" @click="add"
            ><i class="el-icon-edit" style="margin-right: 5px"></i
            >新增试题</el-button
          >
        </div>
        <!-- 表单 -->
        <el-form label-width="80px" ref="formAll">
          <el-row>
            <el-col class="el-col-6">
              <el-form-item label="学科">
                <el-form-item>
                  <el-select
                    v-model="subjectSelect"
                    placeholder="请选择"
                    style="width: 100%"
                    size="small"
                    @change="changeSubject"
                  >
                    <el-option
                      v-for="item in subjectList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col class="el-col-6">
              <el-form-item label="二级目录">
                <el-form-item>
                  <el-select
                    v-model="directorySelect"
                    placeholder="请选择"
                    style="width: 100%"
                    size="small"
                  >
                    <el-option
                      v-for="item in directoryList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col class="el-col-6">
              <el-form-item label="标签">
                <el-form-item>
                  <el-select
                    v-model="tagsSelect"
                    placeholder="请选择"
                    style="width: 100%"
                    size="small"
                  >
                    <el-option
                      v-for="item in tagsList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col class="el-col-6">
              <el-form-item label="关键字">
                <el-form-item>
                  <el-input
                    v-model="keywordSelect"
                    placeholder="根据题干搜索"
                    style="width: 100%"
                    size="small"
                  ></el-input>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col class="el-col-6">
              <el-form-item label="试题类型">
                <el-form-item>
                  <el-select
                    v-model="questionType"
                    placeholder="请选择"
                    style="width: 100%"
                    size="small"
                  >
                    <el-option
                      v-for="item in difficultyList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col class="el-col-6">
              <el-form-item label="难度">
                <el-form-item>
                  <el-select
                    v-model="difficultySelect"
                    placeholder="请选择"
                    style="width: 100%"
                    size="small"
                  >
                    <el-option
                      v-for="item in questionTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col class="el-col-6">
              <el-form-item label="方向">
                <el-form-item>
                  <el-select
                    v-model="directionSelect"
                    placeholder="请选择"
                    style="width: 100%"
                    size="small"
                  >
                    <el-option
                      v-for="item in directionList"
                      :key="item.value"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col class="el-col-6">
              <el-form-item label="录入人">
                <el-form-item>
                  <el-select
                    v-model="creatorSelect"
                    placeholder="请选择"
                    style="width: 100%"
                    size="small"
                  >
                    <el-option
                      v-for="item in creatorSelectList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option
                  ></el-select>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col class="el-col-6">
              <el-form-item label="题目备注">
                <el-form-item>
                  <el-input
                    style="width: 100%"
                    size="small"
                    v-model="remarks"
                  ></el-input>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col class="el-col-6">
              <el-form-item label="企业简称">
                <el-form-item>
                  <el-input
                    style="width: 100%"
                    size="small"
                    v-model="shortName"
                  ></el-input>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col class="el-col-6">
              <el-form-item label="城市">
                <el-form-item>
                  <el-select
                    @change="cityChange"
                    v-model="citySelect"
                    placeholder="请选择"
                    style="width: 48%; margin-right: 2%"
                    size="small"
                  >
                    <el-option
                      v-for="item in citySelectList"
                      :key="item.index"
                      :label="item"
                      :value="item"
                    >
                    </el-option
                  ></el-select>
                  <el-select
                    v-model="countySelect"
                    placeholder="请选择"
                    style="width: 50%"
                    size="small"
                  >
                    <el-option
                      v-for="item in countySelectList"
                      :key="item.index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col class="el-col-6">
              <el-form-item style="text-align: right">
                <el-row type="flex">
                  <el-col>
                    <el-button size="mini" @click="clearFn">清除</el-button>
                    <el-button size="mini" type="primary" @click="searchFn"
                      >搜索</el-button
                    >
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 标签页 -->
        <el-tabs type="card" @tab-click="tabClick"  v-model="activeName">
          <el-tab-pane label="全部" name="all" ></el-tab-pane>
          <el-tab-pane label="待审核" name="managed"></el-tab-pane>
          <el-tab-pane label="已审核" name="audited"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="refused"></el-tab-pane>
        </el-tabs>
        <!-- 警告框 -->
        <div>
          <el-alert
            :title="`数据一共 ${pageList.total} 条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
        <!-- 表格 -->
        <el-table :data="list">
          <el-table-column label="试题编号" prop="number" width="100px"> </el-table-column>
          <el-table-column label="学科" prop="subject" width="150px"> </el-table-column>
          <el-table-column label="目录" prop="catalog" width="150px"> </el-table-column>
          <el-table-column label="题型" prop="questionType" width="100px">
            <template v-slot="{ row }">
              <span>
                {{
                  row.questionType === '1'
                    ? '单选'
                    : row.questionType === '2'
                    ? '多选'
                    : '简答'
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="题干" prop="question" width="250px">
            <template v-slot="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" prop="addDate" width="250px">
            <template v-slot="{ row }">
              <span>{{ createTimeDate(row.addDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="难度" prop="difficulty" width="100px">
            <template v-slot="{ row }">
              <span>
                {{
                  row.difficulty === '1'
                    ? '简单'
                    : row.questionType === '2'
                    ? '一般'
                    : '困难'
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="录入人" prop="creator" width="150px"> </el-table-column>
          <el-table-column label="审核状态" prop="chkState" width="150px">
            <template v-slot="{ row }">
              <span v-if="row.chkState === 0">待审核</span>
              <span v-else-if="row.chkState === 1">已审核</span>
              <span v-else-if="row.chkState === 2">拒绝</span>
            </template>
          </el-table-column>
          <el-table-column label="审核意见" prop="chkRemarks" width="150px">
          </el-table-column>
          <el-table-column label="审核人" prop="chkUser" width="150px"></el-table-column>
          <el-table-column label="发布状态" prop="creator">
            <template v-slot="{ row }">
              <span v-if="row.chkState === 0">待发布</span>
              <span v-else-if="row.chkState === 2">待发布</span>
              <span v-else-if="row.publishState === 1">已发布</span>
              <span v-else-if="row.publishState === 0">已下架</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px" fixed="right" align="center">
            <template v-slot="{ row }">
              <el-button @click="primary(row.id)" type="text" size="mini"
                >预览</el-button
              >
              <el-button @click="addChk(row.id)" type="text" size="mini" :disabled="row.chkState === 1"
                >审核</el-button
              >
              <el-button @click="success(row.id)" type="text" size="mini" :disabled="row.publishState === 1"
                >修改</el-button
              >
              <el-button type="text" size="mini" @click="grounding(row)">
                {{row.publishState===0?'上架':'下架'}}
                </el-button>
                <!-- <span v-if="row.publishState===0" @click="grounding(row)">上架</span> -->
                <!-- <span v-else-if="row.publishState===1" @click="offShelf(row)">下架</span> -->
              <el-button @click="danger(row.id)" type="text" size="mini" :disabled="row.publishState === 1"
                >删除</el-button
              >
              <el-button
                @click="warning(row.id)"
                type="text"
                size="mini"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="el-pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="prev, pager, next, sizes, jumper"
            :current-page="pageList.page"
            :page-size="pageList.pagesize"
            :total="pageList.total"
            :page-sizes="pageList.pages"
          >
          </el-pagination>
        </div>
      </el-card>
      <Preview ref="Preview" :show-dialog.sync="showDialog"></Preview>
      <!-- 题库审核框 -->
      <Check ref="Check" :showChk.sync="showChk" :chkId="chkId" @submit="initData"></Check>
    </div>
  </div>
</template>

<script>
import { choice, remove, choiceAdd, choicePublish } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { simple as directorysSimple } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import {
  difficulty,
  questionType,
  direction,
  username,
  chkType,
  publishType
} from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import Preview from '../components/questions-preview'
import Check from '../components/questions-check.vue'
import moment from 'moment'
export default {
  components: {
    Preview,
    Check
  },
  data () {
    return {
      subjectSelect: '', // 学科
      subjectList: [],
      directorySelect: '', // 目录
      directoryList: [],
      tagsSelect: '', // 标签
      tagsList: [],
      keywordSelect: '', // 关键字

      questionType: '', // 试题类型
      difficultyList: difficulty,

      difficultySelect: '', // 难度
      questionTypeList: questionType,

      directionSelect: '', // 方向
      directionList: direction,

      creatorSelect: '', // 录入人
      creatorSelectList: username,

      remarks: '', // 题目备注
      shortName: '', // 企业简称

      citySelect: '', // 城市
      citySelectList: provinces(),

      countySelect: '', // 区县
      countySelectList: [],
      list: [],
      pageList: {
        page: 1,
        pagesize: 5,
        total: 0,
        pages: [5, 10, 20, 50],
        chkState: null
      },
      showDialog: false, // 显示隐藏
      currentNodeId: null,
      chkType: chkType, // 审核状态
      publishType: publishType, // 发布状态
      showChk: false, // 审核框显示隐藏
      chkId: null,
      activeName: 'all' // 默认选中切换tab栏

    }
  },
  created () {
    this.initData()
    this.subjectListFn() // 学科
  },
  methods: {
    // 切换tab栏
    async tabClick (tab) {
      // console.log(tab)
      // console.log(tab.index)
      // console.log(this.activeName)
      if (this.activeName === 'managed') {
        // 待管理
        const { data } = await choice({
          page: 1,
          pagesize: 5,
          chkState: 0
        })
        this.list = data.items
        this.pageList.total = data.counts
      } else if (this.activeName === 'audited') {
        // 已审核
        const { data } = await choice({
          page: 1,
          pagesize: 5,
          chkState: 1
        })
        this.list = data.items
        this.pageList.total = data.counts
      } else if (this.activeName === 'refused') {
        // 已拒绝
        const { data } = await choice({
          page: 1,
          pagesize: 5,
          chkState: 2
        })
        this.list = data.items
        this.pageList.total = data.counts
      } else {
        // 全部
        this.initData()
      }
    },
    async initData () {
      const { data } = await choice({
        page: this.pageList.page,
        pagesize: this.pageList.pagesize,
        chkState: this.pageList.chkState
      })
      // console.log(data)
      this.list = data.items
      this.pageList.total = data.counts
    },

    handleSizeChange (newPagesize) {
      this.pageList.pagesize = newPagesize
      this.initData()
    },
    handleCurrentChange (newPage) {
      this.pageList.page = newPage
      this.initData()
    },
    // 渲染时间
    createTimeDate (time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取学科
    async subjectListFn () {
      const result1 = await simple()
      this.subjectList = result1.data
    },
    // change事件当学科发生变化
    changeSubject () {
      this.$nextTick(async () => {
        // 获取目录
        const result2 = await directorysSimple({
          subjectID: this.subjectSelect
        })
        this.directoryList = result2.data
        // 获取标签
        const result3 = await tagsSimple({
          subjectID: this.subjectSelect
        })
        this.tagsList = result3.data
      })
    },
    // 获取区县
    cityChange () {
      this.countySelectList = citys(this.citySelect)
    },
    // 点击清除
    clearFn () {
      this.subjectSelect = ''
      this.directorySelect = ''
      this.tagsSelect = ''
      this.keywordSelect = ''
      this.questionType = ''
      this.difficultySelect = ''
      this.directionSelect = ''
      this.creatorSelect = ''
      this.citySelect = ''
      this.countySelect = ''
      this.remarks = ''
      this.shortName = ''
    },
    // 点击搜索
    async searchFn () {
      const { data } = await choice({
        subjectID: this.subjectSelect,
        keyword: this.keywordSelect
      })
      console.log(data)
      this.list = data.items
    },
    // 点击新增跳转
    add () {
      this.$router.push('new')
    },
    // 点击预览
    primary (id) {
      this.showDialog = true
      this.$refs.Preview.detail(id)
    },
    // 点击修改
    success (id) {
      this.$router.push(`new?id=${id}`)
    },
    // 点击删除
    danger (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.list.length === 1) {
            this.pageList.page--
          }
          this.initData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击加入精选
    warning (id) {
      console.log(id)
      this.$confirm('此操作将该文件加入精选', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          await choiceAdd({
            id,
            choiceState: 1
          })
          this.$message({
            type: 'success',
            message: '加入成功!'
          })
          if (this.list.length === 1) {
            this.pageList.page--
          }
          this.initData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入'
          })
        })
    },
    // 点击审核
    async addChk (id) {
      this.showChk = true
      this.chkId = id
    },
    // 点击审核确定
    // submit () {
    //   this.initData()
    // },
    // 点击上架
    // async grounding (row) {
    //   this.$confirm('您确认上架这道题目吗?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(async () => {
    //       await choicePublish({
    //         id: row.id,
    //         publishState: 1
    //       })
    //       this.$message({
    //         type: 'success',
    //         message: '上架成功!'
    //       })
    //       this.initData()
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消上架'
    //       })
    //     })
    // },
    // // 点击下架
    // async offShelf (row) {
    //   this.$confirm('您确认下架架这道题目吗?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(async () => {
    //       await choicePublish({
    //         id: row.id,
    //         publishState: 0
    //       })
    //       this.$message({
    //         type: 'success',
    //         message: '下架成功!'
    //       })
    //       this.initData()
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消下架'
    //       })
    //     })
    // }
    // 上下架
    async grounding (row) {
      this.$confirm(`您确认${row.publishState === 0 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await choicePublish({
            id: row.id,
            publishState: row.publishState === 0 ? 1 : 0
          })
          this.$message({
            type: 'success',
            message: `${row.publishState === 0 ? '上架' : '下架'}成功!`
          })
          this.initData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: `已${row.publishState === 0 ? '上架' : '下架'}上架`
          })
        })
    }
  },
  watch: {
    // 学科/目录/标签
    subjectSelect () {
      if (this.subjectSelect) {
        this.directorySelect = ''
        this.tagsSelect = ''
      }
    },
    // 城市改变清除区县
    citySelect () {
      if (this.citySelect) {
        // console.log(123)
        this.countySelect = ''
      }
    }
  }
}
</script>

<style scoped>
.el-col {
  float: left;
}
.el-col-6 {
  width: 25%;
}
.app-container {
  padding: 0;
  margin: 10px;
}
.btn_wrapper {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}

</style>
